<template>
  <u-popup round="32rpx" :show="show" @close="close" @open="open">
    <view class="filter-content">
      <view class="title">
        <text class="fs-36 bold black">全部筛选</text>
        <image
          src="../../assets/images/icons/close.png"
          style="width: 40rpx; height: 40rpx; opacity: 0.6"
          mode="scaleToFill"
          class="close"
          @click="close"
        />
      </view>
      <scroll-view
        class="scroll-view"
        scroll-y="true"
        bindscrolltolower="loadMore"
      >
        <view class="f-item" v-for="(filter, index) in filters" :key="index">
          <text class="f-title fs-32 dark-text bold">{{ filter.title }}</text>
          <view class="list flex flex-a">
            <text
              v-for="(type, i) in filter.types"
              :key="i"
              class="f-type"
              :class="[type.id === selecetdVal[index].value ? 'active' : '']"
              @click="onFilterType(index, type)"
            >
              {{ type.name }}
            </text>
          </view>
        </view>
      </scroll-view>
      <view class="btns flex">
        <text @click="onReset" class="btn default-btn">重置</text>
        <text @click="onConfirm" class="btn active-btn">确定</text>
      </view>
    </view>
  </u-popup>
</template>
<script>
export default {
  props: {
    show: false,
    filters: {
      type: Array,
      default: () => [],
    },
    origin: {
      type: Array,
      default: () => [],
    },
    selecetdVal: {
      type: Array,
      default: () => [],
    },
    pathName: {
      type: String,
      default: "path",
    },
  },
  data() {
    return {};
  },
  watch: {},
  methods: {
    open() {},
    onFilterType(idx, item) {
      this.selecetdVal[idx].value = item.id;
      this.selecetdVal[idx].path = item[this.pathName] || null;
    },
    onReset() {
      this.$emit("reset");
    },
    onConfirm() {
      this.$emit("confirm", [...this.selecetdVal]);
    },
    close() {
      this.$emit("close", [...this.origin]);
    },
  },
};
</script>
<style lang="less" scope>
@import url("../../assets/styles/common");
.filter-content {
  padding: 48rpx 0;
  box-sizing: border-box;
  .title {
    padding: 0 48rpx;
    text-align: center;
    position: relative;
    line-height: 36rpx;
    .close {
      position: absolute;
      right: 48rpx;
      top: 0;
      font-size: 48rpx;
    }
  }
  .list {
    flex-wrap: wrap;
  }
  .f-item {
    padding: 0 48rpx;
    margin-top: 48rpx;
    .f-title {
      color: rgba(7, 11, 28, 0.8);
    }
    .f-type {
      // flex: 1;
      flex-shrink: 0;
      margin-right: 16rpx;
      padding: 8rpx;
      border-radius: 8rpx;
      border: 2rpx solid #f5f7fe;
      background: #f5f7fe;
      text-align: center;
      color: rgba(7, 11, 28, 0.6);
      margin-top: 24rpx;
      min-width: 153rpx;
      width: fit-content;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:nth-last-child(1) {
        margin-right: 0;
      }
      &.active {
        color: #436af3;
        border-color: #436af3;
      }
    }
  }
  .btns {
    padding: 24rpx 48rpx 0 48rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      &:nth-child(1) {
        margin-right: 22rpx;
      }
    }
  }
}
</style>
